<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="css/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/message.css">

    <script src="js/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="js/footer.js"></script>
    <script src="js/vue.js"></script>
    <script src="js/elementui.js"></script>
    <title>留言</title>
</head>

<body>
    <!-- header模块 -->
    <div class="header">
        <div class="w">
            <div class="logo fl">
                <a href="index.html"><img src="images/logo.png" alt=""></a>
            </div>
            <ul class="fl">
                <li>
                    <a href="index.html">首页</a>
                </li>
                <li>
                    <a href="study.html">学习中心</a>
                </li>
                <li>
                    <a href="news.html">校园资讯</a>
                </li>

                <li>
                    <a href="personal-course.html">个人中心</a>
                </li>
                <li class="active">
                    <a href="message.html">留言</a>
                </li>
            </ul>
            <!-- 搜索框 -->
            <div class="input-search fl">
                <input type="search" class="search" id="search" placeholder="搜索...">
                <span class="glyphicon glyphicon-search"></span>
            </div>
            <!-- 登录注册按钮 -->
            <div class="fl">
                <a href="javascript:;" class="login">登录/注册</a>
            </div>

        </div>
    </div>
    <!-- 表单区域 -->
    <div class="main">
        <div class="w form">
            <img src="images/message.png" alt="" class="imgs">
            <div id="app">
                <div class="message-title">
                    <h2>您的反馈是我们前进的动力</h2>
                </div>
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="反馈简述" prop="name">
                        <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="反馈模块" prop="region">
                        <el-select v-model="ruleForm.region" placeholder="请选择反馈模块">
                            <el-option label="校园资讯" value="news"></el-option>
                            <el-option label="学习中心" value="study"></el-option>
                            <el-option label="个人中心" value="person"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="反馈内容" prop="desc">
                        <el-input type="textarea" v-model="ruleForm.desc"></el-input>
                    </el-form-item>
                    <el-dialog :visible.sync="dialogVisible" size="tiny">
                        <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                    <el-form-item label="性质" prop="type">
                        <el-checkbox-group v-model="ruleForm.type">
                            <el-checkbox label="服务/用户体验评价" name="type"></el-checkbox>
                            <el-checkbox label="课程举报" name="type"></el-checkbox>
                            <el-checkbox label="线上活动投稿" name="type"></el-checkbox>
                            <el-checkbox label="平台运营建议" name="type"></el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="是否紧急" prop="delivery">
                        <el-switch v-model="ruleForm.delivery"></el-switch>
                    </el-form-item>
                    <el-form-item label="图片材料">
                        <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
    <!-- footer模块 -->
    <div class="footer">
        <div class="w">
            <div class="top">
                <div class="fl">
                    <div class="logo">
                        <a href="index.html"><img src="images/logo.png" alt=""></a>
                    </div>
                    <h5>用户在高强度、压抑的学习中，可以分享学习成果，记录心情!</h5>
                </div>
                <div class="fl">
                    <ul>
                        <li>
                            <h3>关于我们</h3>
                            <a href="javascript:;">集团概况</a>
                            <a href="javascript:;">集团部门</a>
                            <a href="javascript:;">发展历史</a>
                            <a href="javascript:;">法律条款</a>
                        </li>
                        <li>
                            <h3>联系我们</h3>
                            <a href="javascript:;">常见问题</a>
                            <a href="javascript:;">意见反馈</a>
                            <a href="javascript:;">资讯投稿</a>
                            <a href="javascript:;">加入我们</a>
                        </li>
                        <li>
                            <h3>关注我们</h3>
                            <div class="wechat">
                                <img src="images/wechat.png" alt="" id="wechat">
                            </div>
                            <div class="weibo">
                                <img src="images/weibo.png" alt="" id="weibo">
                            </div>
                        </li>
                        <li style="margin-right:0;">
                            <h3>友情链接</h3>
                            <a href="javascript:;">Study课堂</a>
                            <a href="javascript:;">Study集团</a>
                            <a href="javascript:;">Study</a>
                        </li>
                    </ul>
                </div>
                <div class="code" id="code">
                    <img src="images/code.png" alt="">
                </div>
                <span class="angle" id="angle"></span>
            </div>
            <div class="bottom">
                <div>
                    广西来宾市兴宾区铁北大道966号 邮编:123456 Email:abcdefg@xxx.edu.cn <br>
                </div>
                <div>
                    <a href="javascript:;"> 桂ICP备123456789号 </a> 版权所有 © 广西科技师范学院
                </div>

                <div style="margin-bottom:0;">
                    桂公网安备 1234567890号
                </div>
            </div>
        </div>
    </div>
    <script>
        new Vue({
            el: "#app",
            data() {
                return {
                    ruleForm: {
                        name: '',
                        region: '',
                        date1: '',
                        date2: '',
                        delivery: false,
                        type: [],
                        resource: '',
                        desc: '',
                        dialogImageUrl: '',
                        dialogVisible: false
                    },
                    rules: {
                        name: [{
                            required: true,
                            message: '请填写反馈简述',
                            trigger: 'blur'
                        }, {
                            min: 5,
                            max: 30,
                            message: '长度在 5 到 30 个字符',
                            trigger: 'blur'
                        }],
                        region: [{
                            required: true,
                            message: '请选择反馈模块',
                            trigger: 'change'
                        }],
                        type: [{
                            type: 'array',
                            required: true,
                            message: '请至少选择一个所属性质',
                            trigger: 'change'
                        }],
                        resource: [{
                            required: true,
                            message: '请选择活动资源',
                            trigger: 'change'
                        }],
                        desc: [{
                            required: true,
                            message: '请填写反馈内容',
                            trigger: 'blur'
                        }]
                    }
                };
            },
            methods: {
                submitForm(formName) {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            alert('submit!');
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                },
                resetForm(formName) {
                    this.$refs[formName].resetFields();
                },
                handleRemove(file, fileList) {
                    console.log(file, fileList);
                },
                handlePictureCardPreview(file) {
                    this.dialogImageUrl = file.url;
                    this.dialogVisible = true;
                }
            }
        })
    </script>
</body>

</html>